//聊天界面
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import QtQml 2.12
Rectangle{
    id:chatInfo
    property string friendName
    anchors.fill: parent
    color:"#f5f5f5"
    ColumnLayout{
        anchors.fill: parent

        Rectangle{
            id:chatTop
            Layout.preferredWidth: parent.width
            Layout.preferredHeight:75
            anchors.top: parent.top
            color:"#f5f5f5"
            Text{
                id:friendNameText
                anchors.leftMargin: 30
                anchors.left: parent.left
                anchors.fill: parent  // 让文本填充整个矩形

                verticalAlignment: Text.AlignVCenter  // 让文本垂直居中
                text: friendName
                font.pixelSize: 24
                font.bold:true
                color:"#484848"
            }


            Rectangle{
                id:io
                width:160
                height:parent.height
                anchors.right: parent.right
                color:"#f5f5f5"
                Rectangle{
                    id:windowConttler
                    width:160
                    height:32
                    anchors.right: parent.right
                    anchors.top: parent.top
                    RowLayout{
                        anchors.fill: parent
                        spacing:0
                        Rectangle{
                            width:40
                            height:32
                            Button{
                                anchors.fill: parent
                                icon{
                                    source:"qrc:/images/zhiding"
                                    width:14
                                    height: 14
                                }
                                background: Rectangle{
                                    id:btnRectangle
                                    radius:0
                                    anchors.fill: parent
                                    color:"#f5f5f5"
                                    MouseArea{
                                        anchors.fill: parent;
                                        hoverEnabled: true;
                                        cursorShape: Qt.PointingHandCursor;
                                        onEntered: {    //鼠标移入
                                            //背景色
                                            btnRectangle.color ="#e2e2e2";
                                        }
                                        onExited: {
                                            //移出背景色
                                            btnRectangle.color = "#f5f5f5";
                                        }
                                        onPressed: {
                                            //移出背景色
                                            btnRectangle.color = "#d1d1d1";
                                        }

                                    }
                                }
                            }

                        }
                        Rectangle{
                            width:40
                            height:32


                            Button{
                                anchors.fill: parent
                                icon{
                                    source:"qrc:/images/jianhao"
                                    width:14
                                    height: 14

                                }

                                background: Rectangle{

                                    id:btnjianhaoRectangle
                                    radius:0
                                    anchors.fill: parent
                                    color:"#f5f5f5"
                                    MouseArea{
                                        anchors.fill: parent;
                                        hoverEnabled: true;

                                        cursorShape: Qt.PointingHandCursor;
                                        onEntered: {    //鼠标移入

                                            //背景色
                                            btnjianhaoRectangle.color ="#e2e2e2";
                                        }
                                        onExited: {

                                            //移出背景色
                                            btnjianhaoRectangle.color = "#f5f5f5";

                                        }
                                        onPressed: {

                                            //移出背景色
                                            btnjianhaoRectangle.color = "#d1d1d1";
                                        }

                                    }
                                }
                            }
                        }
                        Rectangle{
                            width:40
                            height:32
                            color:"red"

                            Button{
                                anchors.fill: parent
                                icon{
                                    source:"qrc:/images/xingzhuang-juxing"
                                    width:14
                                    height: 14

                                }

                                background: Rectangle{

                                    id:btnxingzhuangjuxingRectangle
                                    radius:0
                                    anchors.fill: parent
                                    color:"#f5f5f5"
                                    MouseArea{
                                        anchors.fill: parent;
                                        hoverEnabled: true;

                                        cursorShape: Qt.PointingHandCursor;
                                        onEntered: {    //鼠标移入

                                            //背景色
                                            btnxingzhuangjuxingRectangle.color ="#e2e2e2";
                                        }
                                        onExited: {

                                            //移出背景色
                                            btnxingzhuangjuxingRectangle.color = "#f5f5f5";

                                        }
                                        onPressed: {

                                            //移出背景色
                                            btnxingzhuangjuxingRectangle.color = "#d1d1d1";
                                        }

                                    }
                                }
                            }
                        }
                        Rectangle{
                            width:40
                            height:32
                            color:"red"

                            Button{
                                anchors.fill: parent
                                icon{
                                    source:"qrc:/images/cha"
                                    width:10
                                    height: 10
                                }

                                background: Rectangle{

                                    id:btnchaRectangle
                                    radius:0
                                    anchors.fill: parent
                                    color:"#f5f5f5"
                                    MouseArea{
                                        anchors.fill: parent;
                                        hoverEnabled: true;

                                        cursorShape: Qt.PointingHandCursor;
                                        onEntered: {    //鼠标移入

                                            //背景色
                                            btnchaRectangle.color ="#e2e2e2";
                                        }
                                        onExited: {
                                            //移出背景色
                                            btnchaRectangle.color = "#f5f5f5";

                                        }
                                        onPressed: {
                                            //移出背景色
                                            btnchaRectangle.color = "#d1d1d1";
                                        }

                                    }
                                }
                            }

                        }
                    }
                }

                Rectangle{
                    width:40
                    height:32
                    anchors.top: windowConttler.bottom
                    anchors.right: parent.right


                    Button{
                        anchors.fill: parent
                        icon{
                            source:"qrc:/images/省略号"
                            width:20
                            height: 20
                        }
                        background: Rectangle{
                            anchors.fill: parent
                            color:"#f5f5f5";
                        }
                    }
                }
            }

        }
        Rectangle{
            id:chatBottom
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height-chatTop.height
            color:"pink"
            border.width: 1;
            border.color: "#e7e7e7";
            anchors.topMargin: 1
            ColumnLayout{
                anchors.fill: parent
                Rectangle{
                    id:mind
                    anchors.top: parent.top
                    Layout.preferredHeight: 560
                    Layout.preferredWidth: parent.width
                    color:"#f5f5f5"
                    border.width: 1;
                    border.color: "#e7e7e7";
                    anchors.bottomMargin:  1
                }
                Rectangle{
                    id:foot
                    anchors.bottom:  parent.bottom
                    Layout.preferredHeight: parent.height-mind.height
                    Layout.preferredWidth: parent.width
                    color:"#f5f5f5"
                    border.color: "#e7e7e7";

                    ColumnLayout{
                        anchors.fill: parent
                        Rectangle{
                            id:iconS
                            anchors.top: parent.top
                            Layout.preferredWidth: parent.width
                            Layout.preferredHeight: 50
                            color:"#f5f5f5"

                            RowLayout{
                                anchors.fill: parent
                                spacing: 0
                                Rectangle{
                                    color:"#f5f5f5"
                                    id:left
                                    anchors.left: parent.left
                                    anchors.top: parent.top
                                    Layout.preferredWidth: 200
                                    Layout.preferredHeight: 50


                                    Button{
                                        id:xiaolian
                                        width: 38
                                        height:38
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.topMargin: (parent.height-xiaolian.height)*0.5
                                        anchors.leftMargin: 20


                                        icon{
                                            source:"qrc:/images/xiaolian"
                                            width:30
                                            height: 30
                                        }
                                        background: Rectangle{
                                            anchors.fill: parent
                                            color:"#f5f5f5"

                                        }
                                    }

                                    Button{
                                        id:shoucang
                                        width: 38
                                        height:38
                                        anchors.left: xiaolian.right
                                        anchors.top: parent.top
                                        anchors.topMargin: (parent.height-xiaolian.height)*0.5



                                        icon{
                                            source:"qrc:/images/wenjianjia"
                                            width:30
                                            height: 30
                                        }
                                        background: Rectangle{
                                            anchors.fill: parent
                                            color:"#f5f5f5"

                                        }
                                    }

                                    Button{
                                        id:jieping
                                        width: 38
                                        height:38
                                        anchors.left: shoucang.right

                                        anchors.top: parent.top
                                        anchors.topMargin: (parent.height-xiaolian.height)*0.5


                                        icon{
                                            source:"qrc:/images/a-jieping1"
                                            width:30
                                            height: 30
                                        }
                                        background: Rectangle{
                                            anchors.fill: parent
                                            color:"#f5f5f5"

                                        }
                                    }

                                    Button{
                                        id:jilu
                                        width: 38
                                        height:38
                                        anchors.left: jieping.right

                                        anchors.top: parent.top
                                        anchors.topMargin: (parent.height-xiaolian.height)*0.5


                                        icon{
                                            source:"qrc:/images/liaotianjilu"
                                            width:30
                                            height: 30
                                        }
                                        background: Rectangle{
                                            anchors.fill: parent
                                            color:"#f5f5f5"

                                        }
                                    }
                                }
                                Rectangle{
                                    id:reight
                                    anchors.right: parent.right
                                    Layout.preferredWidth: 200
                                    Layout.preferredHeight: 50
                                    color:"#f5f5f5"

                                    Button{
                                        id:shipin
                                        width: 38
                                        height:38
                                        anchors.right: parent.right
                                        anchors.top: parent.top
                                        anchors.topMargin: (parent.height-xiaolian.height)*0.5
                                        anchors.rightMargin : 20


                                        icon{
                                            source:"qrc:/images/视频通话"
                                            width:50
                                            height: 50
                                        }
                                        background: Rectangle{
                                            anchors.fill: parent
                                            color:"#f5f5f5"

                                        }
                                    }

                                    Button{
                                        id:yuyin
                                        width: 38
                                        height:38
                                        anchors.right: shipin.left
                                        anchors.top: parent.top
                                        anchors.topMargin: (parent.height-xiaolian.height)*0.5

                                        icon{
                                            source:"qrc:/images/24gl-phoneLoudspeaker"
                                            width:30
                                            height: 30
                                        }
                                        background: Rectangle{
                                            anchors.fill: parent
                                            color:"#f5f5f5"

                                        }
                                    }
                                }
                            }
                        }

                        Rectangle{
                            anchors.bottom:  parent.bottom
                            Layout.preferredWidth: parent.width
                            Layout.preferredHeight: (parent.height-iconS.height)
                            color:"#f5f5f5"
                            ScrollView {
                                id: scView
                                anchors.left: parent.left
                                anchors.leftMargin: 20
                                width: 760
                                Layout.preferredHeight:  24 // 初始高度就是一行
                                background: Rectangle {
                                    anchors.fill: parent

                                    radius: 5
                                }

                                TextArea {
                                        font.pixelSize: 30
                                    background:Rectangle{
                                        anchors.fill: parent
                                        color:"#f5f5f5"
                                    }
                                    id: contentText
                                    property int preContentHeight: 0
                                    wrapMode: TextArea.Wrap;
                                    selectByMouse: true;
                                    onContentHeightChanged: {
                                        //每一行为高度为14， 当输入大于3行的时候自动滚动
                                        if(contentHeight > 14 && contentHeight < 56) {
                                            if(contentHeight != preContentHeight) {
                                                preContentHeight = contentHeight;
                                                scView.height += 14;
                                            }
                                        }
                                    }
                                }
                            }


                            Button{
                                height:40
                                width:125
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 20
                                anchors.right: parent.right
                                anchors.rightMargin: 40
                                Text{
                                    text:"发送(S)"
                                    anchors.centerIn: parent
                                    font.pixelSize: 20
                                    color:"#31c87a"
                                    font.bold: true
                                }
                                background: Rectangle{
                                    anchors.fill: parent
                                    color:"#e9e9e9"
                                    radius : 8
                                }
                            }
                        }

                    }
                }
            }
        }








        Component.onCompleted: {
            console.log(parent.width)
            console.log(parent.height)
            console.log("跳转聊天成功")
            var url = Qt.resolvedUrl(source);
            console.log(url)
            var params = url.split('?')[1].split("=")[1]; // 分割出参数部分
            console.log(params)
            chatInfo.friendName=params

        }

    }
}
